<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link type="text/css" rel="stylesheet" href="/stylesheets/bootstrap.min.css" />
    <title>用户列表</title>

    <!--引入Jq插件-->
    <script type="text/javascript" src="/javascripts/jquery-1.8.3.min.js"></script>

    <!--引入分页插件-->
    <script type="text/javascript" src="/javascripts/jqPaginator.js"></script>

    <!--引入base.js用于改变状态-->
    <script type="text/javascript" src="/javascripts/base.js"></script>
</head>

<body>
    <div class="panel panel-primary" style="margin: 10px 10px;">
        <div class="panel-heading">
            <h3 class="panel-title">
               管理员列表
            </h3>
        </div>
        <div class="panel-body">          
            <div class="clearfix" style="margin-bottom: 10px;">
              </div>
    <div class="row">
        <form>
        <div class="col-md-offset-1 col-md-2 margin-bottom-15">
          <label for="account" class="control-label">账号</label>
          <input type="text" class="form-control" id="account" value="<%=account%>" name="account">                  
        </div>
        <div class="col-md-2 margin-bottom-15">
          <label for="user_name" class="control-label">姓名</label>
          <input type="text" class="form-control" id="user_name" value="<%=userName%>" name="userName">                 
        </div>     
        <div class="row templatemo-form-buttons">
                <div class="col-md-2">
                    <button type="submit" class="btn btn-primary" style="margin-top: 24px;margin-left: 20px;">查询</button>
                  <button type="reset" class="btn btn-default" style="margin-top: 24px;margin-left: 15px;">重置</button>    
                </div>
        </div>
       
        </form>
    </div>
    <div class="clearfix" style="margin-bottom: 20px;"></div>
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
        <div class="table-responsive">
        <table class="table table-striped table-hover table-bordered">
            <thead>
              <tr>
                <th>序号</th>
                <th>账号</th>
                <th>姓名</th>               
                <th>状态</th>
                <th>身份</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
                <% for(var i=0;i<body.length;i++){%>
                    <tr>
                      <td><%=body[i].id %></td>
                      <td><%=body[i].account %></td>
                      <td><%=body[i].user_name %></td>
                      
                      <td><% if(body[i].user_status == 0){%>
                              <p>待审核</p>                
                          <%} else if(body[i].user_status == 1) {%>
                              <p>已通过</p>
                          <%} else {%>
                              <p>未通过</p>
                         <%}%></td>

                      <td><%for(var j=0;j<body[i].roles.length;j++) {%>

                        <%if(body[i].account == body[i].roles[j].user_role.account) {%>
  
                        <%=body[i].roles[j].role_name%>
  
                        <%}%>
  
                        <%}%></td>
                      <td>
                        <a  href="/users/edit?account=<%=body[i].account%>" class="btn btn-info" >编辑</a>
                        <a href="/users/delect/<%=body[i].account %>" class="btn btn-danger delete">删除</a></td>
                    </tr>
                      <%}%>
            </tbody>
        </table> 
        <div id="page" class="pagination pull-right"></div> 
        </div>
        
        </div>
    </div>
        </div>
    </div>

</body>

<script>
  $('#page').jqPaginator({
        totalPages: <%=totalPages%>,   //设置分页的总页数
        visiblePages: 8,  //设置当前可视页码数（例如有100页，当前第1页，则显示1 - 7页）
        currentPage: <%=page %>,    //设置当前的页码
        onPageChange: function (num, type) {    //回调函数，当换页时触发（包括初始化第一页的时候），会传入两个参数： 1、“目标页"的页码，Number类型  2、触发类型，可能的值：“init”（初始化），“change”（点击分页）
          console.log('当前第' + num + '页',type);

          if(type == 'change'){
              location.href="/users/userList?page=" + num + "&account=<%=account%>" + "&userName=<%=userName%>";
          }

        }
      });
</script>

<style> 
  .black_overlay{ 
      display: none; 
      position: absolute; 
      top: 0%; 
      left: 0%; 
      width: 100%; 
      height: 100%; 
      background-color: black; 
      z-index:1001; 
      -moz-opacity: 0.8; 
      opacity:.80; 
      filter: alpha(opacity=88); 
  } 
  .white_content { 
      display: none; 
      position: absolute; 
      top: 25%; 
      left: 25%; 
      width: 55%; 
      height: 55%; 
      padding: 20px; 
      border: 10px solid rgb(120, 196, 231); 
      border-radius: 20px;
      background-color: white; 
      z-index:1002; 
      overflow: auto; 
  } 
</style> 
</html>